<template>
    <div style="padding: 10px">
      <div>
        <span style="">
          <el-input v-model="filter.keyword" placeholder="请输入关键字" style="width: 200px" size="mini" clearable></el-input>
        </span>
        <span style="padding-left: 5px">
          <type-select v-model="filter.type" style="width: 200px" size="mini" clearable></type-select>
        </span>
        <span style="padding-left: 5px"><el-button type="primary" size="mini" @click="handleSearch">搜索</el-button></span>
      </div>
      <div style="padding-top: 10px">
        <el-table :data="products" border fit highlight-current-row ref="table">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="编码">
            <template slot-scope="scope">
              {{ scope.row.code }}
            </template>
          </el-table-column>
          <el-table-column label="名称">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column label="类型">
            <template slot-scope="scope">
              {{ $enums.productType.get(scope.row.type).text }}
            </template>
          </el-table-column>
          <el-table-column label="规格型号">
            <template slot-scope="scope">
              {{ scope.row.model }}
            </template>
          </el-table-column>
          <el-table-column label="计价单位">
            <template slot-scope="scope">
              {{ scope.row.basicUnitName }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="float: right">
        <el-pagination @size-change="handleSizeChange" @current-change="handlePageChange"
          :current-page.sync="filter.pageIndex" :page-sizes="[10, 20, 50, 100, 200, 500]"
          :page-size.sync="filter.pageSize" :prev-click="handlePrePage" :next-click="handleNextPage"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
  </template>
  <script>
  import { getProducts } from "@/api/product"
  export default {
    data() {
      return {
        products: [],
        filter: {
          keyword: null,
          types: this.types,
          purchasable: this.purchasable,
          pageIndex: 1,
          pageSize: 10
        },
        total: 0
      };
    },
    methods: {
      getData() {
        getProducts(this.filter)
          .then(res => {
            if (!res || !res.items)
              this.products = [];
            else {
              this.products = res.items;
              this.total = res.totalCount;
            }
          })
      },
      handlePageChange(pageIndex) {
        this.filter.pageIndex = pageIndex;
        this.getData();
      },
      handleSizeChange(pageSize) {
        this.filter.pageSize = pageSize;
        this.getData();
      },
      handlePrePage(currentPageIndex) {
        this.filter.pageIndex = currentPageIndex - 1;
      },
      handleNextPage(currentPageIndex) {
        this.filter.pageIndex = currentPageIndex + 1;
      },
      handleRefresh() {
        this.pageIndex = 1;
        this.pageSize = 10;
        this.getData();
      },
      handleSearch() {
        this.handleRefresh();
      },
    },
    watch: {
      productTypes: {
        handler(value) {
          if (!value) {
            this.products = [];
  
            return;
          }
  
          this.getData();
        }
      }
    },
    mounted() {
      this.getData();
    },
    props: {
      types: {
        type: Number,
        default: () => [],
      },
      purchasable: {
        type: Boolean,
        default: null
      }
    },
  };
  </script>
  <style scoped></style>